<template>
  <div class="bartitle">
    {{ title }}
    <div>{{ entext }}</div>
  </div>
</template>
<script>
import {formatTime} from '../../utils/index.js'

export default {
  name: "BarTitle",
  props: ['title', 'entext'],
  data() {
    return {}
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.bartitle {
  width: 100%;
  padding: 12px;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  background-image: linear-gradient(to right, #103153, transparent);
  position: relative;
  padding-left: 40px;
  font-family: 阿里妈妈数黑体 Bold;
  display: flex;
  align-items: baseline;
  font-size: 20px;
  font-style: italic;

  > div {
    font-family:none;
    opacity: .3;
    font-size: 12px;
    margin-left:30px;
    font-style: normal;
  }

  &:after {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #5cd9e8;
    left: 15px;
    top: calc(50% - 8px);
    content: "";
    border-radius: 100%;
    animation: rotate3 1s linear infinite;
  }
}

@keyframes rotate3 {
  0% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.6);
  }
}
</style>


